<template>
	<view class="charts-box">
		<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :ontouch='true' tooltipFormat="tooltip1" />
	</view>
</template>

<script >
export default {
	data() {
		return {
			chartData: {},
			opts: {
				color: ["#D7E0FB"],
				enableScroll: true,
				padding: [15, 15, 0, 5],
				legend: { show: false },
				xAxis: {
					disableGrid: true,
					itemCount: 6,
					axisLineColor: '#3662EC'
				},
				yAxis: {
					disabled: true,
					disableGrid: true,
				},
				extra: {
					column: {
						type: "group",
						activeBgOpacity: 0,
						linearType: "none",
						categoryGap: 4,
						linearOpacity: 0.5,
						barBorderCircle: true,
					}
				},
				series: {
					textColor: "#3662EC",
					format: 'prefixYuan'
				}
			},
		}
	},
	onload() {
		this.getServerData()
	},
	methods: {
		getServerData() {
			//模拟从服务器获取数据时的延时
			setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
					series: [
						{
							name: "",
							textColor: "#3662EC",
							data: [35, 36, 33, 13, 34, 35, 31, 33, 13, 26, 19, { value: 27, color: '#3662EC' }],
							format: 'prefixYuan'

						},
					]
				}
				chartData.value = JSON.parse(JSON.stringify(res));
			}, 500);
		},
	}
}
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
	width: 100%;
	height: 300px;
}
</style>